<template>
    <div class="ri">
        <div class="member-list">
            <div class="head">
                <div class="classRom">
                    <div class="flex">
                        <div class="left">
                            <span class="name">教师团队</span>
                            <span>共{{ teacherTeam.length }}人</span>
                        </div>
                    </div>
                </div>
                <div class="rig" v-if="type != 0">
                    <el-button type="primary" class="add" @click="insertVisible = true">
                        <i class="el-icon-plus"></i>添加助教/老师
                    </el-button>
                </div>
            </div>

            <!-- 添加助教对话框 -->
            <el-dialog title="添加教学团队" :visible.sync="insertVisible" @close="insertClose">
                <el-form :model="insertForm" status-icon ref="insertFromRef">
                    <el-form-item label="将要添加的账号复制到这" prop="account">
                        <el-input v-model="insertForm.account" autocomplete="off"></el-input>
                    </el-form-item>
                  <el-form-item label="身份类型" prop="userType">
                    <el-radio-group v-model="insertForm.userType">
                      <el-radio :label="1">教师</el-radio>
                      <el-radio :label="2">助教</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="insertVisible = false">取 消</el-button>
                    <el-button type="primary" @click="insertTeacher(insertForm.account,insertForm.userType)">确 定</el-button>
                </div>
            </el-dialog>

            <div class="tab_view">
                <div class="tab_option"></div>
                <el-table ref="multipleTable" :data="teacherTeam" tooltip-effect="dark" style="width: 100%">
                    <el-table-column type="selection">
                    </el-table-column>
                    <el-table-column prop="name" label="全部成员" sortable>
                    </el-table-column>
                    <el-table-column prop="account" label="账号">
                    </el-table-column>
                    <el-table-column prop="type" label="身份" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.type === 1 ? '管理员' : '助教' }}
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination">
                    <!-- 分页组件 size-change:每页最大变化 current-change:当前最大变化 layout:功能组件 -->
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="PageInfo.page" :page-sizes="[1, 2, 5, 100]" :page-size="PageInfo.pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import { postRequest} from "@/utils/api";

export default {
    name: "allMember",
    components: {

    },
    data() {
        return {
            type: 0,
            insertVisible: false,
            insertForm: {},
            teacherTeam: [],
            // 查询信息实体
            PageInfo: {
                // 查询信息
                courseId: localStorage.getItem("courseId"),
                // 当前页
                page: 1,
                // 每页最大数
                pageSize: 5,
            },
            // 总记录数
            total: 0,
        }
    },
    methods: {
        // 最大数
        handleSizeChange(newSize) {
            this.PageInfo.pageSize = newSize;
            this.getTeacherTeam();
        },
        // page的触发动作
        handleCurrentChange(newPage) {
            this.PageInfo.page = newPage;
            this.getTeacherTeam();
        },
        // 跳转页面
        toNav(nav) {
            this.$router.push(nav);
        },
        // 获取教师团队
        getTeacherTeam() {
            postRequest('/userCourse/getTeacher', this.PageInfo).then(res => {
                if (res) {
                    this.teacherTeam = res.data.data.list;
                    this.total = res.num;
                  console.log(res)
                  console.log(this.teacherTeam)
                    this.getTypeByUserId();
                }
            })
        },
        //添加助教对话框关闭
        insertClose() {
            this.$refs.insertFromRef.resetFields();
            this.insertVisible = false;
        },
        //确认添加助教
        insertTeacher(account,type) {
            this.$refs.insertFromRef.validate(async valid => {
                if (!valid) return;
                const data = {
                    userId: account,
                    courseId: localStorage.getItem('courseId'),
                    type: type
                }
              postRequest("/userCourse/insertAssist", data).then(res => {
                            if (res) {
                                this.$refs.insertFromRef.resetFields();
                                this.insertVisible = false;
                                this.getTeacherTeam();
                            }
              })

            })
        },
    // 通过用户id查询当前用户在此课程中的身份
    getTypeByUserId() {
      const userId = JSON.parse(localStorage.getItem('UserInfo')).id;
      const courseId = localStorage.getItem('courseId');
      const data = { userId, courseId };
      postRequest('/userCourse/list', data).then(res => {
        if (res) {
          console.log(res)
          this.type= res.data.data.list[0].type;
        }
      })
    },
    },
    mounted() {
      this.getTeacherTeam();
    }
}
</script>
<style scoped lang="less">
.ri {
    flex: 1 1 0%;
    border-radius: 8px;
    border: 1px solid rgb(218, 220, 224);
    width: 850px;
    // margin-left: 295px;

    .member-list .head {
        padding: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>